<template>
  <el-form size="small" ref="form" :model="form" label-width="0" label-position="left">
    <div class="text-right">
      <el-button icon="el-icon-plus" type="primary" size="mini" style="width:100px" @click="handleAdd">新增合同</el-button>
    </div>
    <el-table
      :data="form.contractInfoList"
      style="width: 100%">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="contractName"
        label="合同名称"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="" :prop="`contractInfoList.${scope.$index}.contractName`"
          :rules="{
              required: true, message: '合同名称不能为空', trigger: 'blur'
          }">
              <el-input   v-model="scope.row.contractName" placeholder="合同名称"></el-input>
          </el-form-item>                           
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="startDate"
        label="开始日期"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="" :prop="`contractInfoList.${scope.$index}.startDate`"
          :rules="{
              required: true, message: '开始日期不能为空', trigger: 'change'
          }">
            <el-date-picker
              style="width:100%"
              v-model="scope.row.startDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期">
            </el-date-picker>
          </el-form-item>                           
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="endDate"
        label="结束日期"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="" :prop="`contractInfoList.${scope.$index}.endDate`"
          :rules="{
              required: true, message: '结束日期不能为空', trigger: 'change'
          }">
            <el-date-picker
              style="width:100%"
              v-model="scope.row.endDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期">
            </el-date-picker>
          </el-form-item>                           
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="settlementMethod"
        label="结算方式"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <SettlementMethod
              style="width:100%"
              v-model="scope.row.settlementMethod"
              :day.sync="scope.row.day"
              :money1.sync="scope.row.money1"
              :money2.sync="scope.row.money2"
              :money3.sync="scope.row.money3"
              :money4.sync="scope.row.money4"
              :money5.sync="scope.row.money5"
              :money6.sync="scope.row.money6"
            >
            </SettlementMethod>
          </el-form-item>                           
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="oilCardRatio"
        label="油卡比例"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-input
              style="width:85%"
              v-model="scope.row.oilCardRatio"
              @input="limitInput($event,scope.row,'oilCardRatio')"
              clearable
              placeholder="油卡比例"
            />%
          </el-form-item>                           
        </template>        
      </el-table-column>
      <el-table-column
        align="center"
        prop="depositOnContracts"
        label="合同保证金"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-input
              style="width:85%"
              v-model="scope.row.oilCardRatio"
              @input="limitInput($event,scope.row,'depositOnContracts')"
              clearable
              placeholder="合同保证金"
            />元
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="applicationScope"
        label="应用范围"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <el-select style="width:100%" v-model="scope.row.applicationScope" placeholder="应用范围">
              <el-option v-for="item in []" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="relatedAccessories"
        label="相关附件"
        min-width="150">
        <template slot-scope="scope">
          <el-form-item label-width="0" label="">
            <UploadFile
              :data="{}"
              :size="10"
              :limit="3"
              accept=".png, .jpg, .jpeg, .gif, .pdf, .doc, .docx"
              :file-list="scope.row.relatedAccessories"
            >
            </UploadFile>
          </el-form-item>                           
        </template>  
      </el-table-column>
      <el-table-column
        align="center"
        prop="action"
        label="操作"
        width="100"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleReduce(scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import { validEmail } from "@/utils/validate"
import UploadImage from '@/components/UploadImage/uploadImage.vue';
import UploadFile from '@/components/UploadFile';
import SettlementMethod from './settlementMethod.vue'
import { randomString } from "@/utils/zito"
export default {
  name: "ContractInfoTable",
  components: {
    UploadImage,
    UploadFile,
    SettlementMethod
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      form: {
        contractInfoList: this.data
      },
    };
  },
  created() {
  },
  methods: {
    handleValidate() {
      return new Promise((resolve) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false)
          }
        });
      })
    },
    limitInput(value,row,name) {
      row[name] = ('' + value) // 第一步：转成字符串
            .replace(/[^\d]/g, "") // 只能输入数字
            .replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
    },
    handleAdd() {
      this.form.contractInfoList.push({
        uuid: randomString(32)
      })
    },
    handleReduce(index) {
      this.form.contractInfoList.splice(index, 1)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
